<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<!-- BEGIN: Head-->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description"
          content="Vuesax admin is super flexible, powerful, clean &amp; modern responsive bootstrap 4 admin template with unlimited possibilities.">
    <meta name="keywords"
          content="admin template, Vuesax admin template, dashboard template, flat admin template, responsive admin template, web app">
    <meta name="author" content="PIXINVENT">
    <title>Checkout - Vuesax - Bootstrap HTML admin template</title>
    <link rel="apple-touch-icon" href="../../../app-assets/images/ico/apple-icon-120.png">
    <link rel="shortcut icon" type="image/x-icon" href="../../../app-assets/images/ico/favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">

    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css"
          href="../../../app-assets/vendors/css/forms/spinner/jquery.bootstrap-touchspin.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/extensions/toastr.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Theme CSS-->
    <link rel="stylesheet" type="text/css" href="http://cdn.bootstrapmb.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/bootstrap-extended.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/colors.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/dark-layout.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/semi-dark-layout.css">

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/core/colors/palette-gradient.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/pages/app-ecommerce-shop.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/plugins/forms/wizard.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/plugins/extensions/toastr.css">
    <!-- END: Page CSS-->

    <!-- BEGIN: Custom CSS-->
    <link rel="stylesheet" type="text/css" href="../../../assets/css/style.css">
    <!-- END: Custom CSS-->

</head>
<!-- END: Head-->

<!-- BEGIN: Body-->

<body class="vertical-layout vertical-menu-modern 2-columns ecommerce-application navbar-floating footer-static  "
      data-open="click" data-menu="vertical-menu-modern" data-col="2-columns">

<!-- BEGIN: Main Menu-->
<div class="main-menu menu-fixed menu-light menu-accordion menu-shadow" data-scroll-to-active="true">
    <div class="navbar-header">
        <ul class="nav navbar-nav flex-row">
            <li class="nav-item mr-auto"><a class="navbar-brand">
                <div class="brand-logo"></div>
                <h2 class="brand-text mb-0">Vuesax</h2>
            </a></li>
            <li class="nav-item nav-toggle"><a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"><i
                    class="feather icon-x d-block d-xl-none font-medium-4 primary toggle-icon"></i><i
                    class="toggle-icon feather icon-disc font-medium-4 d-none d-xl-block collapse-toggle-icon primary"
                    data-ticon="icon-disc"></i></a></li>
        </ul>
    </div>
    <div class="shadow-bottom"></div>
    <div class="main-menu-content">
        <ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
            <li class=" nav-item"><a href="index.html"><i class="feather icon-home"></i><span class="menu-title"
                                                                                              data-i18n="Dashboard">Dashboard</span><span
                    class="badge badge badge-warning badge-pill float-right mr-2">2</span></a>
                <ul class="menu-content">
                    <li><a href="dashboard-analytics.html"><i class="feather icon-circle"></i><span class="menu-item"
                                                                                                    data-i18n="Analytics">Analytics</span></a>
                    </li>
                    <li><a href="dashboard-ecommerce.html"><i class="feather icon-circle"></i><span class="menu-item"
                                                                                                    data-i18n="eCommerce">eCommerce</span></a>
                    </li>
                </ul>
            </li>
            <li class=" navigation-header"><span>Apps</span>
            </li>
            <li class=" nav-item"><a href="app-email.html"><i class="feather icon-mail"></i><span class="menu-title"
                                                                                                  data-i18n="Email">Email</span></a>
            </li>
            <li class=" nav-item"><a href="app-chat.html"><i class="feather icon-message-square"></i><span
                    class="menu-title" data-i18n="Chat">Chat</span></a>
            </li>
            <li class=" nav-item"><a href="app-todo.html"><i class="feather icon-check-square"></i><span
                    class="menu-title" data-i18n="Todo">Todo</span></a>
            </li>
            <li class=" nav-item"><a href="app-calender.html"><i class="feather icon-calendar"></i><span
                    class="menu-title" data-i18n="Calender">Calender</span></a>
            </li>
            <li class=" nav-item"><a href="#"><i class="feather icon-shopping-cart"></i><span class="menu-title"
                                                                                              data-i18n="Ecommerce">Ecommerce</span></a>
                <ul class="menu-content">
                    <li><a href="app-ecommerce-shop.html"><i class="feather icon-circle"></i><span class="menu-item"
                                                                                                   data-i18n="Shop">Shop</span></a>
                    </li>
                    <li><a href="app-ecommerce-wishlist.html"><i class="feather icon-circle"></i><span class="menu-item"
                                                                                                       data-i18n="Wish List">Wish List</span></a>
                    </li>
                    <li class="active"><a href="app-ecommerce-checkout.html"><i class="feather icon-circle"></i><span
                            class="menu-item" data-i18n="Checkout">Checkout</span></a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!-- END: Main Menu-->

<!-- BEGIN: Content-->
<div class="app-content content"  id="app">

    <!-- BEGIN: Header-->
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <nav class="header-navbar navbar-expand-lg navbar navbar-with-menu floating-nav navbar-light navbar-shadow">
        <div class="navbar-wrapper">
            <div class="navbar-container content">
                <div class="navbar-collapse" id="navbar-mobile">
                    <div class="mr-auto float-left bookmark-wrapper d-flex align-items-center">
                        <ul class="nav navbar-nav">
                            <li class="nav-item mobile-menu d-xl-none mr-auto"><a
                                    class="nav-link nav-menu-main menu-toggle hidden-xs" href="#"><i
                                    class="ficon feather icon-menu"></i></a></li>
                        </ul>
                        <ul class="nav navbar-nav bookmark-icons">
                            <!-- li.nav-item.mobile-menu.d-xl-none.mr-auto-->
                            <!--   a.nav-link.nav-menu-main.menu-toggle.hidden-xs(href='#')-->
                            <!--     i.ficon.feather.icon-menu-->
                            <li class="nav-item d-none d-lg-block"><a class="nav-link" href="app-todo.html"
                                                                      data-toggle="tooltip" data-placement="top"
                                                                      title="Todo"><i
                                    class="ficon feather icon-check-square"></i></a></li>
                            <li class="nav-item d-none d-lg-block"><a class="nav-link" href="app-chat.html"
                                                                      data-toggle="tooltip" data-placement="top"
                                                                      title="Chat"><i
                                    class="ficon feather icon-message-square"></i></a></li>
                            <li class="nav-item d-none d-lg-block"><a class="nav-link" href="app-email.html"
                                                                      data-toggle="tooltip" data-placement="top"
                                                                      title="Email"><i
                                    class="ficon feather icon-mail"></i></a></li>
                            <li class="nav-item d-none d-lg-block"><a class="nav-link" href="app-calender.html"
                                                                      data-toggle="tooltip" data-placement="top"
                                                                      title="Calendar"><i
                                    class="ficon feather icon-calendar"></i></a></li>
                        </ul>
                        <ul class="nav navbar-nav">
                            <li class="nav-item d-none d-lg-block"><a class="nav-link bookmark-star"><i
                                    class="ficon feather icon-star warning"></i></a>
                                <div class="bookmark-input search-input">
                                    <div class="bookmark-input-icon"><i class="feather icon-search primary"></i></div>
                                    <input class="form-control input" type="text" placeholder="Explore Vuesax..."
                                           tabindex="0" data-search="template-list"/>
                                    <ul class="search-list"></ul>
                                </div>
                                <!-- select.bookmark-select-->
                                <!--   option Chat-->
                                <!--   option email-->
                                <!--   option todo-->
                                <!--   option Calendar-->
                            </li>
                        </ul>
                    </div>
                    <ul class="nav navbar-nav float-right">
                        <li class="dropdown dropdown-language nav-item"><a class="dropdown-toggle nav-link"
                                                                           id="dropdown-flag" href="#"
                                                                           data-toggle="dropdown" aria-haspopup="true"
                                                                           aria-expanded="false"><i
                                class="flag-icon flag-icon-us"></i><span class="selected-language">English</span></a>
                            <div class="dropdown-menu" aria-labelledby="dropdown-flag"><a class="dropdown-item" href="#"
                                                                                          data-language="en"><i
                                    class="flag-icon flag-icon-us"></i> English</a><a class="dropdown-item" href="#"
                                                                                      data-language="fr"><i
                                    class="flag-icon flag-icon-fr"></i> French</a><a class="dropdown-item" href="#"
                                                                                     data-language="de"><i
                                    class="flag-icon flag-icon-de"></i> German</a><a class="dropdown-item" href="#"
                                                                                     data-language="pt"><i
                                    class="flag-icon flag-icon-pt"></i> Portuguese</a></div>
                        </li>
                        <li class="nav-item d-none d-lg-block"><a class="nav-link nav-link-expand"><i
                                class="ficon feather icon-maximize"></i></a></li>
                        <li class="nav-item nav-search"><a class="nav-link nav-link-search"><i
                                class="ficon feather icon-search"></i></a>
                            <div class="search-input">
                                <div class="search-input-icon"><i class="feather icon-search primary"></i></div>
                                <input class="input" type="text" placeholder="Explore Vuesax..." tabindex="-1"
                                       data-search="template-list"/>
                                <div class="search-input-close"><i class="feather icon-x"></i></div>
                                <ul class="search-list"></ul>
                            </div>
                        </li>
                        <li class="dropdown dropdown-notification nav-item"><a class="nav-link nav-link-label" href="#"
                                                                               data-toggle="dropdown"><i
                                class="ficon feather icon-bell"></i><span
                                class="badge badge-pill badge-primary badge-up">5</span></a>
                            <ul class="dropdown-menu dropdown-menu-media dropdown-menu-right">
                                <li class="dropdown-menu-header">
                                    <div class="dropdown-header m-0 p-2">
                                        <h3 class="white">5 New</h3><span
                                            class="notification-title">App Notifications</span>
                                    </div>
                                </li>
                                <li class="scrollable-container media-list"><a class="d-flex justify-content-between"
                                                                               href="javascript:void(0)">
                                    <div class="media d-flex align-items-start">
                                        <div class="media-left"><i
                                                class="feather icon-plus-square font-medium-5 primary"></i></div>
                                        <div class="media-body">
                                            <h6 class="primary media-heading">You have new order!</h6><small
                                                class="notification-text"> Are your going to meet me tonight?</small>
                                        </div>
                                        <small>
                                            <time class="media-meta" datetime="2015-06-11T18:29:20+08:00">9 hours ago
                                            </time>
                                        </small>
                                    </div>
                                </a><a class="d-flex justify-content-between" href="javascript:void(0)">
                                    <div class="media d-flex align-items-start">
                                        <div class="media-left"><i
                                                class="feather icon-download-cloud font-medium-5 success"></i></div>
                                        <div class="media-body">
                                            <h6 class="success media-heading red darken-1">99% Server load</h6><small
                                                class="notification-text">You got new order of goods.</small>
                                        </div>
                                        <small>
                                            <time class="media-meta" datetime="2015-06-11T18:29:20+08:00">5 hour ago
                                            </time>
                                        </small>
                                    </div>
                                </a><a class="d-flex justify-content-between" href="javascript:void(0)">
                                    <div class="media d-flex align-items-start">
                                        <div class="media-left"><i
                                                class="feather icon-alert-triangle font-medium-5 danger"></i></div>
                                        <div class="media-body">
                                            <h6 class="danger media-heading yellow darken-3">Warning notifixation</h6>
                                            <small class="notification-text">Server have 99% CPU usage.</small>
                                        </div>
                                        <small>
                                            <time class="media-meta" datetime="2015-06-11T18:29:20+08:00">Today</time>
                                        </small>
                                    </div>
                                </a><a class="d-flex justify-content-between" href="javascript:void(0)">
                                    <div class="media d-flex align-items-start">
                                        <div class="media-left"><i
                                                class="feather icon-check-circle font-medium-5 info"></i></div>
                                        <div class="media-body">
                                            <h6 class="info media-heading">Complete the task</h6><small
                                                class="notification-text">Cake sesame snaps cupcake</small>
                                        </div>
                                        <small>
                                            <time class="media-meta" datetime="2015-06-11T18:29:20+08:00">Last week
                                            </time>
                                        </small>
                                    </div>
                                </a><a class="d-flex justify-content-between" href="javascript:void(0)">
                                    <div class="media d-flex align-items-start">
                                        <div class="media-left"><i class="feather icon-file font-medium-5 warning"></i>
                                        </div>
                                        <div class="media-body">
                                            <h6 class="warning media-heading">Generate monthly report</h6><small
                                                class="notification-text">Chocolate cake oat cake tiramisu
                                            marzipan</small>
                                        </div>
                                        <small>
                                            <time class="media-meta" datetime="2015-06-11T18:29:20+08:00">Last month
                                            </time>
                                        </small>
                                    </div>
                                </a></li>
                                <li class="dropdown-menu-footer"><a class="dropdown-item p-1 text-center"
                                                                    href="javascript:void(0)">Read all notifications</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown dropdown-user nav-item"><a
                                class="dropdown-toggle nav-link dropdown-user-link" href="#" data-toggle="dropdown">
                            <div class="user-nav d-sm-flex d-none"><span class="user-name text-bold-600">John Doe</span><span
                                    class="user-status">Available</span></div>
                            <span><img class="round" src="../../../app-assets/images/portrait/small/avatar-s-11.png"
                                       alt="avatar" height="40" width="40"/></span>
                        </a>
                            <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item"
                                                                              href="page-user-profile.html"><i
                                    class="feather icon-user"></i> Edit Profile</a><a class="dropdown-item"
                                                                                      href="app-email.html"><i
                                    class="feather icon-mail"></i> My Inbox</a><a class="dropdown-item"
                                                                                  href="app-todo.html"><i
                                    class="feather icon-check-square"></i> Task</a><a class="dropdown-item"
                                                                                      href="app-chat.html"><i
                                    class="feather icon-message-square"></i> Chats</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="auth-login.html"><i class="feather icon-power"></i>
                                    Logout</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <!-- END: Header-->

    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">Checkout</h2>
                        <div class="breadcrumb-wrapper col-12">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="index.html">Home</a>
                                </li>
                                <li class="breadcrumb-item"><a href="#">eCommerce</a>
                                </li>
                                <li class="breadcrumb-item active">Checkout
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-header-right text-md-right col-md-3 col-12 d-md-block d-none">
                <div class="form-group breadcrum-right">
                    <div class="dropdown">
                        <button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
                                class="feather icon-settings"></i></button>
                        <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#">Chat</a><a
                                class="dropdown-item" href="#">Email</a><a class="dropdown-item" href="#">Calendar</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <input type="checkbox" v-model="checkAll">全选/全不选
        <div class="content-body">
            <form action="#" class="icons-tab-steps checkout-tab-steps wizard-circle">
                <!-- Checkout Place order starts -->
                <h6><i class="step-icon step feather icon-shopping-cart"></i>Cart</h6>
                <fieldset class="checkout-step-1 px-0">
                    <section id="place-order" class="list-view product-checkout">
                        <div class="checkout-items">
                            <div class="card ecommerce-card" v-for="cartItem in cartVO.list">
                                <div class="card-content">
                                    <div class="item-img text-center">
                                        <img :src="'../../../'+cartItem.imgUrl" alt="img-placeholder">
                                    </div>
                                    <div class="card-body">
                                        <div class="item-name">
                                            <span>{{cartItem.goodsName}}</span>
                                            <p class="item-company">By <span class="company-name">Amazon</span></p>
                                            <p class="stock-status-in">In Stock</p>
                                        </div>
                                        <div class="item-quantity">
                                            <p class="quantity-title">Quantity</p>
                                            <!--                                                <div class="input-group quantity-counter-wrapper">-->
                                            <!--                                                    <input type="text" class="quantity-counter" value="1">-->
                                            <!--                                                </div>-->
                                            <div class="input-group quantity-counter-wrapper bootstrap-touchspin">
                                                <span class="input-group-btn input-group-prepend bootstrap-touchspin-injected"><button
                                                        class="btn btn-primary bootstrap-touchspin-down"
                                                        @click="minusAmount(cartItem.amount,cartItem.goodsId)"
                                                        type="button">-</button></span>
                                                <input type="text" class="quantity-counter form-control"
                                                       :value="cartItem.amount"
                                                       @change="changeAmount($event,cartItem.goodsId)">
                                                <span class="input-group-btn input-group-append bootstrap-touchspin-injected"><button
                                                        class="btn btn-primary bootstrap-touchspin-up"
                                                        @click="addAmount(cartItem.amount,cartItem.goodsId)"
                                                        type="button">+</button></span>
                                            </div>
                                        </div>
                                        <p class="delivery-date">Delivery by, Wed Apr 25</p>
                                        <p class="offers">17% off 4 offers Available</p>
                                    </div>
                                    <div class="item-options text-center">
                                        <div class="item-wrapper">
                                            <div class="item-rating">
                                                <div class="vs-checkbox-con">
                                                    <input type="checkbox" v-model="itemChecked" @change="getCartTotalPrice()" :value="cartItem.goodsId">
                                                    <span class="vs-checkbox vs-checkbox-sm">
                                            <span class="vs-checkbox--check">
                                                <i class="vs-icon feather icon-check"></i>
                                            </span>
                                        </span>
                                                    <div class="badge badge-primary badge-md">
                                                        4 <i class="feather icon-star ml-25"></i>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="item-cost">
                                                <h6 class="item-price">
                                                    ${{cartItem.totalPrice}}
                                                </h6>
                                                <p class="shipping">
                                                    <i class="feather icon-shopping-cart"></i> Free Shipping
                                                </p>
                                            </div>
                                        </div>
                                        <div class="wishlist remove-wishlist" @click="removeCartItem(cartItem.goodsId)">
                                            <i class="feather icon-x align-middle"></i> Remove
                                        </div>
                                        <div class="cart remove-wishlist">
                                            <i class="fa fa-heart-o mr-25"></i> Wishlist
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="checkout-options">
                            <div class="card">
                                <div class="card-content">
                                    <div class="card-body">
                                        <p class="options-title">Options</p>
                                        <div class="coupons">
                                            <div class="coupons-title">
                                                <p>Coupons</p>
                                            </div>
                                            <div class="apply-coupon">
                                                <p>Apply</p>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="price-details">
                                            <p>Price Details</p>
                                        </div>
                                        <div class="detail">
                                            <div class="detail-title">
                                                Total MRP
                                            </div>
                                            <div class="detail-amt">
                                                $598
                                            </div>
                                        </div>
                                        <div class="detail">
                                            <div class="detail-title">
                                                Bag Discount
                                            </div>
                                            <div class="detail-amt discount-amt">
                                                -25$
                                            </div>
                                        </div>
                                        <div class="detail">
                                            <div class="detail-title">
                                                Estimated Tax
                                            </div>
                                            <div class="detail-amt">
                                                $1.3
                                            </div>
                                        </div>
                                        <div class="detail">
                                            <div class="detail-title">
                                                EMI Eligibility
                                            </div>
                                            <div class="detail-amt emi-details">
                                                Details
                                            </div>
                                        </div>
                                        <div class="detail">
                                            <div class="detail-title">
                                                Delivery Charges
                                            </div>
                                            <div class="detail-amt discount-amt">
                                                Free
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="detail">
                                            <div class="detail-title detail-total">Total</div>
                                            <div class="detail-amt total-amt">${{totalPrice}}</div>
                                        </div>
                                        <!--                                            <div class="btn btn-primary btn-block place-order">PLACE ORDER</div>-->
                                        <input type="button" class="btn btn-primary" @click="addToOrders()"
                                               value="PLACE ORDER"></input>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </fieldset>
                <!-- Checkout Place order Ends -->

                <!-- Checkout Customer Address Starts -->
                <h6><i class="step-icon step feather icon-home"></i>Address</h6>
                <fieldset class="checkout-step-2 px-0">
                    <section id="checkout-address" class="list-view product-checkout">
                        <div class="card">
                            <div class="card-header flex-column align-items-start">
                                <h4 class="card-title">Add New Address </h4>
                                <a href="javascript:;" @click="showModal" data-toggle="modal" data-target="#composeForm" style="color: #7367f0;font-weight: bold">选择已有的收货地址</a>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 col-sm-12">
                                            <div class="form-group">
                                                <label for="checkout-name">Full Name:</label>
                                                <input type="text" v-model="addr.receiver" id="checkout-name" class="form-control required" name="fname">
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12">
                                            <div class="form-group">
                                                <label for="checkout-number">Mobile Number:</label>
                                                <input type="number" v-model="addr.phone" id="checkout-number" class="form-control required" name="mnumber">
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12">
                                            <div class="form-group">
                                                <label for="checkout-addr">address:</label>
                                                <input type="text" v-model="addr.address" id="checkout-addr" class="form-control required" name="address">
                                            </div>
                                        </div>
                                        <div class="col-sm-6 offset-md-6">
                                            <div @click="addOrderAddress(addr.addrId)" class="btn btn-primary delivery-address float-right">
                                                SAVE AND PLACE ORDER
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </fieldset>
                <!-- Checkout Customer Address Ends -->

                <!-- Checkout Payment Starts -->

                <!-- Checkout Payment Starts -->
            </form>

        </div>





        <!-- Modal -->
        <div class="modal fade text-left" id="composeForm" tabindex="-1" role="dialog" aria-labelledby="emailCompose" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title text-text-bold-600" id="emailCompose">New Message</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body pt-1">
                        <table id="tb1" class="table table-striped table-hover">
                            <thead>
                            <th>收货人</th>
                            <th>电话</th>
                            <th>收货地址</th>
                            <th>操作</th>
                            </thead>
                            <tbody id="tbody">
                            <tr v-for="addr in addrList">
                                <td>{{addr.receiver}}</td>
                                <td>{{addr.phone}}</td>
                                <td>{{addr.address}}</td>
                                <td>
                                    <input type="button" @click="addOrder(addr.addrId)" class="btn btn-primary delivery-address" value="PLACE ORDER"/>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <input type="Reset" value="Cancel" class="btn btn-white" data-dismiss="modal">
                    </div>
                </div>
            </div>
        </div>














        <!--        <div id="a1" style="display: none">-->
        <!--            <table id="tb1" class="table table-striped table-hover">-->
        <!--                <thead>-->
        <!--                <th>收货人</th>-->
        <!--                <th>电话</th>-->
        <!--                <th>收货地址</th>-->
        <!--                <th>操作</th>-->
        <!--                </thead>-->
        <!--                <tbody id="tbody">-->
        <!--                    <tr v-for="addr in addrList">-->
        <!--                        <td>{{addr.receiver}}</td>-->
        <!--                        <td>{{addr.phone}}</td>-->
        <!--                        <td>{{addr.address}}</td>-->
        <!--                        <td>-->
        <!--                            <input type="button" class="btn btn-primary delivery-address" value="PLACE ORDER"/>-->
        <!--                        </td>-->
        <!--                    </tr>-->
        <!--&lt;!&ndash;                    <tr>&ndash;&gt;-->
        <!--&lt;!&ndash;                        <td>程大饼子</td>&ndash;&gt;-->
        <!--&lt;!&ndash;                        <td>13322226666</td>&ndash;&gt;-->
        <!--&lt;!&ndash;                        <td>青年公寓</td>&ndash;&gt;-->
        <!--&lt;!&ndash;                        <td><input type="button" value="选择"/> </td>&ndash;&gt;-->
        <!--&lt;!&ndash;                    </tr>&ndash;&gt;-->
        <!--&lt;!&ndash;                    <tr>&ndash;&gt;-->
        <!--&lt;!&ndash;                        <td>葱小花</td>&ndash;&gt;-->
        <!--&lt;!&ndash;                        <td>13366668888</td>&ndash;&gt;-->
        <!--&lt;!&ndash;                        <td>五道口</td>&ndash;&gt;-->
        <!--&lt;!&ndash;                        <td><input type="button" value="选择"/> </td>&ndash;&gt;-->
        <!--&lt;!&ndash;                    </tr>&ndash;&gt;-->
        <!--&lt;!&ndash;                    <tr>&ndash;&gt;-->
        <!--&lt;!&ndash;                        <td>皮小蛋</td>&ndash;&gt;-->
        <!--&lt;!&ndash;                        <td>13366669999</td>&ndash;&gt;-->
        <!--&lt;!&ndash;                        <td>通州</td>&ndash;&gt;-->
        <!--&lt;!&ndash;                        <td><input type="button" value="选择"/> </td>&ndash;&gt;-->
        <!--&lt;!&ndash;                    </tr>&ndash;&gt;-->
        <!--                </tbody>-->
        <!--            </table>-->
        <!--        </div>-->
    </div>
</div>

<!-- Checkout Customer Address Ends -->

<!-- Checkout Payment Starts -->

<!-- Checkout Payment Starts -->
<!--            </form>-->

<!--        </div>-->
<!--    </div>-->
</div>
<!-- END: Content-->

<div class="sidenav-overlay"></div>
<div class="drag-target"></div>

<!-- BEGIN: Footer-->
<footer class="footer footer-static footer-light">
    <p class="clearfix blue-grey lighten-2 mb-0"><span class="float-md-left d-block d-md-inline-block mt-25">COPYRIGHT &copy; 2019<a
            class="text-bold-800 grey darken-2" href="http://www.bootstrapmb.com/item/4747"
            target="_blank">Pixinvent,</a>All rights Reserved</span><span class="float-md-right d-none d-md-block">Hand-crafted & Made with<i
            class="feather icon-heart pink"></i></span>
        <button class="btn btn-primary btn-icon scroll-top" type="button"><i class="feather icon-arrow-up"></i></button>
    </p>
</footer>
<!-- END: Footer-->


<!-- BEGIN: Vendor JS-->
<script src="../../../app-assets/vendors/js/vendors.min.js"></script>
<!-- BEGIN Vendor JS-->

<!-- BEGIN: Page Vendor JS-->
<!--    <script src="../../../app-assets/vendors/js/forms/spinner/jquery.bootstrap-touchspin.js"></script>-->
<script src="../../../app-assets/vendors/js/extensions/jquery.steps.min.js"></script>
<script src="../../../app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="../../../app-assets/vendors/js/extensions/toastr.min.js"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Theme JS-->
<script src="../../../app-assets/js/core/app-menu.js"></script>
<script src="../../../app-assets/js/core/app.js"></script>
<script src="../../../app-assets/js/scripts/components.js"></script>
<!-- END: Theme JS-->

<!-- BEGIN: Page JS-->
<!--    <script src="../../../app-assets/js/scripts/pages/app-ecommerce-shop.js"></script>-->
<!-- END: Page JS-->

<!--begin:vue-->
<script src="../../../app-assets/js/scripts/vue.min.js"></script>
<script src="../../../app-assets/js/scripts/axios.js"></script>
<!--end:vue-->

<script src="../../../app-assets/js/scripts/jquery-1.12.3.min.js"></script>
<script src="../../../app-assets/js/scripts/shop.js"></script>

</body>
<!-- END: Body-->
<script>
    new Vue({
        el: '#app',
        data: {
            cartVO: {
                userId: 0,
                totalPrice: 0,
                list: []
            },
            itemChecked:[],//购物车中被选中的商品goodsId们
            totalPrice:0,
            checkAll:false,
            addrList:[],
            addr:{
                receiver:'',
                phone:'',
                address:'',

            }
        },
        methods: {
            addOrderAddress(){
                if(this.itemChecked.length==0){
                    alert("请选择要购买的商品");
                    return;
                }
                axios({
                    url:getRootPath()+"/addr/addAddAndCho",
                    data:{
                        receiver:this.addr.receiver,
                        phone:this.addr.phone,
                        address:this.addr.address,

                    },
                    method:'post',
                    headers:{axiosReq:'axiosReq'}
                }).then(res=>{
                    if(res.data.data!=0){
                        console.log(res.data.data)
                        addOrder(res.data.data)
                    }
                }).catch(res=>{
                    console.log('新增地址失败')
                })
            }
            ,
            addOrder(addrId){//用已有地址 提交订单
                //提交订单（判断是否已选择了要提交的商品）
                if(this.itemChecked.length==0){
                    alert("请选择要购买的商品");
                    return;
                }
                axios({
                    url:getRootPath()+"/orders/addOrder",
                    method:'post',
                    data:{
                        totalPrice:this.totalPrice,
                        goodsIds:this.itemChecked,
                        addressId:addrId
                    },
                    headers:{axiosReq:'axiosReq'}
                }).then(res=>{
                    console.log("addOrder",res.data.data)
                    if(res.data.code=='1004'){
                        window.location.href="auth-login.html"
                    }else{//去支付页面
                        window.location.href = getRootPath() + "/alipay/pay?" +
                            "WIDtotal_amount="+this.totalPrice+"&WIDout_trade_no="+res.data.data +
                            "&WIDsubject=测试";
                    }
                }).catch(res=>{
                    console.log("挂了")
                })
            },
            showModal(){//显示地址列表
                //现去后台查询数据库，将地址列表查回
                axios({
                    url:getRootPath()+"/addr/getAddrList",
                    headers:{
                        axiosReq: 'axiosReq'
                    }
                }).then(res=>{
                    console.log("getAddrList...",res.data);
                    if (res.data.code == "1004") {
                        window.location.href = "auth-login.html"
                    }
                    this.addrList = res.data.data;
                }).catch(res=>{console.log("挂了")})

                // $('#a1').css("display","block");
            },
            getCartTotalPrice(){//计算 已选商品中的总价
                console.log("cartVO...",this.cartVO)
                // var that = this;
                var sum = 0;
                $.each(this.itemChecked,(i,goodsID)=>{
                    console.log("已选id....",goodsID)
                    $.each(this.cartVO.list,(j,cartItem)=>{
                        console.log("cartItem的goodsId.."+cartItem.goodsId)
                        if(goodsID==cartItem.goodsId){
                            sum = ((sum*100+cartItem.totalPrice*100)/100).toFixed(2);//保留两位小数
                        }
                    })
                })
                this.totalPrice = sum;
            },
            removeCartItem(goodsId) {
                axios({
                    url: getRootPath() + "/cart/removeCartItem/" + goodsId,
                    method: 'delete'
                }).then(res => {
                    console.log("removeCartItem", res.data)
                    this.init();
                }).catch(res => {
                    console.log("挂了")
                })
            },
            minusAmount(amount, goodsId) {//点击 "-"这个按钮
                if (amount > 1) {
                    amount--;
                    this.updateCart(amount, goodsId);
                }
            },
            addAmount(amount, goodsId) {//
                amount++;
                this.updateCart(amount, goodsId);
            },
            changeAmount(obj, goodsId) {
                console.log("changeAmount..." + obj)
                this.updateCart(obj.target.value, goodsId)
            },
            updateCart(amount, goodsId) {
                //axios去后台。
                axios({
                    url: getRootPath() + "/cart/updateCart/" + goodsId + "/" + amount,//使用restful的方式
                    method: 'put',
                    headers: {
                        axiosReq: 'axiosReq'
                    }
                }).then(res => {
                    console.log("updateCart...", res.data)
                    if (res.data.code == "1004") {
                        window.location.href = "auth-login.html"
                    }
                    this.init();

                }).catch(res => {
                    console.log("挂了")
                })

            },
            init() {
                axios({
                    url: getRootPath() + '/cart/getCart',
                    headers: {
                        axiosReq: 'axiosReq'
                    }
                }).then(res => {
                    console.log("getCart....", res.data)
                    this.cartVO = res.data.data;
                    this.getCartTotalPrice();
                    if (res.data.code == "1004") {
                        window.location.href = "auth-login.html"
                    }
                }).catch(res => {
                    console.log("挂了")
                })
            }
        },
        mounted() {
            this.init();
        },
        watch:{//监听某属性，是否有变化
            checkAll(newVal,oldVal){
                console.log("checkAll....",newVal,oldVal)
                if(newVal==true){//让所有的checkbox都选中，换句话说，可以让this.itemChecked=[1,2,3,4,54,6]
                    //this.itemChecked=[3,6]
                    $.each(this.cartVO.list,(index,item)=>{
                        this.itemChecked.push(item.goodsId);
                    })
                }else{
                    this.itemChecked = [];//清除这个数组中的元素，会使用每个商品对应的checkbox不被选中
                }
                //计算已选总金额
                this.getCartTotalPrice();
            }
        }
    })
</script>
</html>